 <template>
   <div class="node-info-container">
    <div class="header">
     <div class="header-center">
        <span>已选中节点ID : </span>
        <span class="id-text">{{ id }}</span>
     </div>
      <div class="header-right">
         <span>详情</span>
      </div>
    </div>
    <div class="content">
        <div class="content-center">
          <div class="content-center-left">
            <div  :class="{'online':isOnline,'offline':!isOnline}">{{ isOnline ? '在线' : '离线' }}</div>
          </div>
          <div class="content-center-right">
            <div class="content-center-right-item" v-for="(item,index) in dataList1" :key="index">
               <div class="color-#CFF4EE text-14px flex justify-between" >
                 <span>{{ item.label }}</span>
                 <span>{{ item.value }}%</span>
               </div>
               <el-progress :percentage="item.value" :stroke-width="5" :show-text="false"
               class="rssi-progress-bar" ></el-progress>
            </div>
          </div>
         
        </div>
        <div class="content-bottom">
          <div class="content-bottom-wrapper">
            <div class="content-bottom-item" v-for="(item,index) in dataList2" :key="index">
              <div class="item-label">{{ item.label }}</div>
              <div class="item-value" v-if="!item.isCustom">{{ item.value }}</div>
              <div class="item-value" :class="item.valueMap[item.value]?.class || ''" v-else>{{ item.valueMap[item.value]?.text || item.value }}</div>
            </div>
          </div>
        </div>
    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'NodeInfo',
 })
 </script>
 <script setup  lang="ts">
 const props = defineProps({
   id:Number,
   cpu:Number,
   memory:Number,
   disk:Number,
   ipAddress:Number,
   deployTotal:Number,
   type:Number,
   createTime:String,
   isOnline:Boolean,
 })
const {id,cpu,memory,disk,ipAddress,deployTotal,type,createTime,isOnline} = toRefs(props)
const dataList1:any = computed(()=>{
  return [
  {
    label:'CPU',
    value:cpu?.value || 0,
  },
  {
    label:'内存',
    value:memory?.value || 0,
  },
  {
    label:'磁盘',
    value:disk?.value || 0,
  },
]}
)
const dataList2:any = computed(()=>{
  return [
  {
    label:'IP',
    value:ipAddress?.value || 0,
    isCustom:false,
  },
  {
    label:'类型',
    value:type?.value || 0,
    isCustom:true,
    valueMap:{
        '1':{text:'真实节点',class:'status-success'},
        '0':{text:'虚拟节点',class:'status-error'},
    }
  },
  {
    label:'时间',
    value:createTime?.value || 0,
    isCustom:false,
  },
  {
    label:'部署物总数',
    value:deployTotal?.value || 0,
    isCustom:false,
  },
]
})
 </script>
 
 <style  lang="scss" scoped>
 @import '@/styles/progress.scss';
.node-info-container{
  width: 100%;
  height: 289px;
  padding: 16px;
  .header{
    width: 100%;
    height: 50px;
    display: flex;
    background-image: url('@/assets/imgs/dataScreen/left-bg2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    .header-center{
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 220px;  
      .id-text{
    font-size: 20px;
    color: #FFFFFF;
    line-height: 20px;
text-shadow: 0px 0px 4px #3CEBFF;
      }
    } 
    .header-right{
      font-size: 12px;
      color: #5EFFFF;
      width: 68px;
      height: 30px;
      background-image: url('@/assets/imgs/dataScreen/left-bg3.png');
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-weight: 500;
    }
  }
  .content{
    width: 100%;
    height: 258px;
    .content-center{
        width: 100%;   
        display: flex;
        gap: 20px;
        .content-center-left{
            width: 67px;
            height: 121px;
            background-image: url('@/assets/imgs/dataScreen/nodeInfo-bg1.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
            display: flex;
            justify-content: center;
            div{
                font-weight: 700;
                font-size: 16px;
            }
            .online{
               color: #2DFF65;
               position: absolute;
               bottom: 15px;
               left: 0;
               right: 0;
               text-align: center;
            }
            .offline{
                color: #FF4D4F;
                position: absolute;
               bottom: 15px;
               left: 0;
               right: 0;
               text-align: center;
            }
        }
        .content-center-right{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    }
    .content-bottom{
        width: 100%;
        margin-top: 15px;  
        .content-bottom-wrapper {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }   
        .content-bottom-item {
            background-image: url('@/assets/imgs/dataScreen/nodeInfo-bg2.png');
            height: 32px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item-label {
                font-size: 14px;
                color: #CFF4EE;
                font-weight: 400;
            }
            .item-value {
                font-size: 14px;
                color: #FFFFFF;
                font-weight: 500;
                text-shadow: 0px 0px 5px rgba(60, 235, 255, 0.5);
            }
            .status-success{
                color: #2DFF65;
            }
            .status-error{
                color: #FF4D4F;
            }
        }
    }
  }
}
</style>
 